<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<button onclick="demo()">点我发请求（3个请求依次发）</button>

		<script type="text/javascript" >
			function sendAjax(options){
				//获取请求相关的参数
				const {url,data,success,error} = options
				//创建xhr
				const xhr = new XMLHttpRequest()
				//绑定监听
				xhr.onreadystatechange = ()=>{
					if(xhr.readyState === 4 ){
						if(xhr.status >= 200 && xhr.status <= 299) success(xhr.response)
						else error(xhr.response)
					}
				}
				//自动解析json
				xhr.responseType = 'json'
				let str = ''
				for (let key in data){
					str += `${key}=${data[key]}&`
				}
				str = str.slice(0,-1)
				//配置请求信息
				xhr.open('GET',url+'?'+str)
				//发送请求
				xhr.send()
			}
			
			function demo(){
				sendAjax({
					url:'https://api.apiopen.top/getJoke',
					success(data){
						console.log('第1次请求成功了',data)
						sendAjax({
							url:'https://api.apiopen.top/getJoke',
							success(data){
								console.log('第2次请求成功了',data)
								sendAjax({
									url:'https://api.apiopen.top/getJoke',
									success(){console.log('第3次请求成功了',data)},
									error(){console.log('第3次请求失败了')}
								})
							},
							error(){console.log('第2次请求失败了')}
						})
					},
					error(){console.log('第1次请求失败了')}
				})
			}
		</script>
	</body>
</html>